---
title: תיבת סימון
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

משמש כאשר משתמש צריך לבחור מספר ערכים ממספר אפשרויות.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkbox } from "twenty-ui/display";

export const MyComponent = () => {
  return (
    <Checkbox
      checked={true}
      indeterminate={false}
      onChange={() => console.log("onChange function fired")}
      onCheckedChange={() => console.log("onCheckedChange function fired")}
      variant="primary"
      size="small"
      shape="squared"
    />
  );
};
```

</Tab>
<Tab title="Props">

| תכונות          | סוג     | תיאור                                                                                                        |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| נבחר            | בוליאני | מציין האם תיבת הסימון מסומנת                                                                                 |
| indeterminate   | בוליאני | מציין האם תיבת הסימון נמצאת במצב לא מוגדר (לא מסומן ולא לא מסומן)                         |
| onChange        | פונקציה | הפונקציה שברצונך להפעיל כאשר מצב תיבת הסימון משתנה                                                           |
| onCheckedChange | פונקציה | הפונקציה שברצונך להפעיל כאשר מצב ה'מסומן' משתנה                                                              |
| variant         | string  | הסגנון הוויזואלי של התיבה. האופציות כוללות: `ראשוני`, `שניוני`, ו- `שלישוני` |
| גודל            | string  | הגודל של תיבת הסימון. ישנן שתי אפשרויות: `קטן` ו`גדול`                       |
| צורה            | string  | הצורה של תיבת הסימון. ישנן שתי אפשרויות: `מרובע` ו`מעוגל`                    |

</Tab>
</Tabs>
